//首页
<template>
    <view class="container">
        <!-- 开发时碰到 ui 相关问题参考：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html -->


        <!-- 		<uni-card>背单词首页</uni-card>
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：22222</text>
		<uni-link :href="href" :text="href"></uni-link>
		
		<view>睇下我 睇下我</view> -->


        <view class="statistics">
            <view class="center">
                <text>学新</text>
            </view>
            <view class="circle">
                <text>学新</text>
            </view>
        </view>
		
		<view class="">
			{{countInfo.forget}}
			{{countInfo.num1}}
			{{countInfo.num2}}
			{{countInfo.num3}}
			{{countInfo.num4}}
			{{countInfo.num5}}
			{{countInfo.num6}}
			{{countInfo.known}}
		</view>

        <view class="summary">
            <view class="item">
                <text class="count">
                    1550
                </text>
                <text class="title">
                    今日识词
                </text>
            </view>
            <view class="item">
                <text class="count">
                    58
                </text>
                <text class="title">
                    今日待复习
                </text>
            </view>
            <view class="item">
                <text class="count">
                    28
                </text>
                <text class="title">
                    累计识词
                </text>
            </view>

        </view>

        <view class="buttomRow">
            <button class="buttomLeft" type="warn" @click="startReview">开始复习</button>
            <button class="buttomRight" type="primary" @click="continueStudy">继续学习</button>
        </view>



    </view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from "vue";
	
	import { useUserInfoStore } from '../../store';
	import { useStudyInfoStore } from '../../store';
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	//获得store实例对象
	const studyInfoStore = useStudyInfoStore()
	
	let countInfo = ref({
		forget: 0,
		num1: 0,
		num2: 0,
		num3: 0,
		num4: 0,
		num5: 0,
		num6: 0,
		known: 0
	})
	
	
	onLoad(async () => {
		const res = await uniCloud.callFunction({
			name: "countWords",
			data: {
				relateUuid: userInfoStore.userInfo.uuid,
				wordBankId: "GaoKao3500"
			}
		})
		countInfo.value.forget = res.result.data.forget
		countInfo.value.num1 = res.result.data.num1
		countInfo.value.num2 = res.result.data.num2
		countInfo.value.num3 = res.result.data.num3
		countInfo.value.num4 = res.result.data.num4
		countInfo.value.num5 = res.result.data.num5
		countInfo.value.num6 = res.result.data.num6
		countInfo.value.known = res.result.data.known
	})
	
    function startReview() {
        console.log("开始复习");
		studyInfoStore.setStudyMode(0)
        uni.navigateTo({
            url: "/pages/detection/detection"
        })
		
    }



    function continueStudy() {
        console.log("继续学习"),
		studyInfoStore.setStudyMode(1)
		uni.navigateTo({
		    url: "/pages/memorize-words/memorize-words"
		})
    }
</script>

<style lang="scss" scoped>
    .container {
        font-size: 14px;
        line-height: 24px;
        background-color: #436582;
        height: 100vh;

        .statistics {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vw;
            position: relative;

            .center {
                width: 40vw;
                height: 40vw;
                border-radius: 50%;
                background-color: #f6c932;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;

                text {
                    color: white;
                    font-size: 30px;
                }
            }

            .circle {
                width: 25vw;
                height: 25vw;
                border-radius: 50%;
                background-color: #f6c932;
                display: flex;
                justify-content: center;
                align-items: center;
                transform-origin: 20px;
                transform: translate(-35vw, 0vw);

                text {
                    color: white;
                    font-size: 30px;
                }
            }
        }

        .summary {
            padding: 0 20px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15rpx;

                .count {
                    color: #adcaea;
                    font-size: 30px;
                    font-weight: bold;
                }

                .title {
                    color: #7091b1;
                    font-size: 20px;
                }
            }
        }

        .buttomRow {
            padding: 0 20px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            gap: 10rpx;

            .buttomLeft {
                width: 100%;
            }

            .buttomRight {
                width: 100%;
            }
        }
    }
</style>